@extends('layouts.app')


@section('content')

    <div class="container">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('') }}">首页</a></li>
                <li class="breadcrumb-item"><a href="{{url('chatList')}}">聊天大厅</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{$room_info->name}}</li>
            </ol>
        </nav>


        <div class="row">



            <div class="col-8 col-sm-10">
                {{--聊天区域--}}
                <div class="card">
                    <div class="card-header">
                        聊天区
                    </div>
                    <div class="card-body" id="talk" style="max-height:500px;height:500px;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;">
                        <p class="card-text">欢迎“{{$user_info->name}}”来到“{{$room_info->name}}”聊天室，文明聊天，谢谢合作……</p>

                    </div>
                </div>
                {{--聊天区域结束--}}

                {{--发送消息--}}
                <div class="input-group mb-3">
                    {{--<select class="custom-select" id="inputGroupSelect01">--}}
                        {{--<option selected>所有人</option>--}}
                        {{--<option value="1">One</option>--}}
                        {{--<option value="2">Two</option>--}}
                        {{--<option value="3">Three</option>--}}
                    {{--</select>--}}
                    <input type="text" class="form-control" placeholder="请输入对他/她说的话..." id="msg">
                    <div class="input-group-append">
                        <span class="btn btn-primary" onClick="send()" onkeydown="onKeyDown(event)">发送</span>
                    </div>
                </div>
                {{--发送消息结束--}}
            </div>

            <div class="col-4 col-sm-2">
                <div class="card bg-light mb-3" >
                    <div class="card-header">在线会员</div>
                    <div class="card">
                        <ul class="list-group list-group-flush" id="user_list">
                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </div>

    {{--websocket代码--}}


    <script type="text/javascript">

        // 打开一个 web socket
        var ws = new WebSocket("ws://106.12.22.78:9501");

        ws.onopen = function()
        {
            // Web Socket 已连接上，使用 send() 方法发送数据
            send("连接成功");
        };

        ws.onmessage = function (evt)
        {

            var obj = JSON.parse(evt.data);
            console.log(obj);
            //判断是用户列表还是消息
            if(obj.type=='msg')
            {
                var received_msg =  '<p>'+obj.nickname+'：'+obj.data+'</p>';
                var  talk = document.getElementById('talk').innerHTML;
                talk += '\n' +received_msg;
                document.getElementById('talk').innerHTML = talk;
                document.getElementById('msg').value ='';

                var scrollDom = document.getElementById('talk');
                scrollDom.scrollTop = scrollDom.scrollHeight
            }else if(obj.type=='userlist')
            {
                var user_list = '';
                $.each( obj.data, function(i,row){
                    user_list+='<li class="list-group-item">'+row.name+'</li>';
                    console.log(row);
                });
                document.getElementById('user_list').innerHTML = user_list;
            }

        };

        ws.onclose = function()
        {
            // 关闭 websocket
            alert("连接已关闭...");
        };

        function send(content)
        {
            if(content)
            {
                var msg = content;
            }else{
                var msg = document.getElementById('msg').value;
            }
            if(!msg)
            {
                alert('请输入聊天内容');
                return false;
            }
            var msgObj={room_id:{{$room_info->id}},user_id:{{$user_info->id}},nickname:'{{$user_info->name}}',msg:msg};
            ws.send(JSON.stringify(msgObj));
        }

        $(document).ready(function(){
            // 按回车发送消息
            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    send();
                }
            });
        });

    </script>



@endsection

